<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { postSysMessageMuchApi, getSysMessageApi } from '@/common/apis/notice'


const open = ref<boolean>(false);
// 储存用户选中的 username
const noticeData = ref()
// 创建表单
const useForm = Form.useForm;

const selectData = ref([
    { id: 1, username: '通知消息' },
    { id: 2, username: '提示消息' },
    { id: 3, username: '重要消息' },
    { id: 4, username: '紧急消息' },
])

const props = defineProps({
    selectedRowData: {
        type: Object, // 数据类型
        requied: true, // 是否必传
    }
})

const formState = ref({
    userIds: [],
    type: 1,
    content: '',
});


// 监听 props.selectedRowData 的变化
watch(
    () => props.selectedRowData,
    (newSelectedRowData) => {
        // 更新 noticeData
        noticeData.value = newSelectedRowData
        // 将选中的id绑定到 formState.notice
        formState.value.userIds = noticeData.value.map((item) => item.id);
    },
);


// 校验
const rulesRef = reactive({
    type: [
        {
            required: true,
            message: '内容不能为空',
        },
    ],
    content: [
        {
            required: true,
            message: '内容为空',
        },
        { min: 2, max: 100, message: '内容为1-100字符', trigger: 'blur', }
    ],
});

// 校验数据
const { validate, validateInfos } = useForm(formState, rulesRef, {
    onValidate: (...args) => console.log(...args),
});

const showModal = () => {
    open.value = true;
};

// 点击确认
const handleOk = async () => {
    validate()
    await postSysMessageMuchApi(formState.value)
    message.success('已发布通知！');
    open.value = false
    await getSysMessageApi()
    // 清空内容
    formState.value.content = ''
};

const handleChange = (value: string[]) => {
    console.log(`selected ${value}`);
};

// 暴露 showModal 方法给父组件
defineExpose({
    showModal,
});

</script>

<template>
    <div class="notice">
        <a-modal v-model:open="open" title="群发通知" @ok="handleOk">
            <a-form>
                <!-- 要发送的人员 -->
                <a-form-item>
                    <a-select :showSearch="false" :open="false" v-model:value="formState.userIds" mode="multiple"
                        style="width: 100%" placeholder="请选择你要发送的人" @change="handleChange">
                        <!-- 渲染父组件传递的用户数据 -->
                        <a-select-option v-for="item in selectedRowData" :key="item.id">
                            {{ item.username }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <!-- 选择消息等级 -->
                <a-form-item label="消息等级" v-bind="validateInfos.type">
                    <a-select placeholder="消息等级" v-model:value="formState.type">
                        <a-select-option v-for="item in selectData" :key="item.id">{{ item.username
                            }}</a-select-option>
                    </a-select>
                </a-form-item>
                <!-- 通知消息 -->
                <a-form-item label="通知内容" v-bind="validateInfos.content">
                    <a-textarea v-model:value="formState.content" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<style lang="scss" scoped>
.demo-dropdown-wrap :deep(.ant-dropdown-button) {
    margin-right: 8px;
    margin-bottom: 8px;
}
</style>